<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style>
       .yellow{
            color: yellow;
        } 
        .blue{
            color: blue;
        }
        .pink{
            color: pink;
        }
    </style>
    
</head>
<body>
    <div id="app">
        <!-- 数据双向绑定 -->
        <h3>数据双向绑定⬇</h3>
        <!-- 双花括号，文本插值 -->
        <p>{{age}}</p>
        <p>{{name}}</p>
        <p>{{sex}}</p>
        <p>{{Yeswude?'':'No'}}wude</p>
        <br>
        <!-- 指令，写在标签上，当做标签属性，用来操作标签 -->
        <input type="text" v-model="text">
        <p>{{text}}</p>
        <br>
        <h3>指令⬇</h3>
        <!-- 不闪烁{{xxx}} 好一点 -->
        <!-- 显示文本 -->
        <p v-text="name"></p>
        <!-- 显示带有html格式的文本 -->
        <p v-html="text2"></p>
        <br>
        <!-- 只存在一个按钮 -->
        <button v-if="islogin">退出</button>
        <button v-else="islogin">登录</button>
        <br>
        <!-- 两个按钮都存在，通过css样式使其中一个不可见 -->
        <button v-show="islogin">退出</button>
        <button v-show="!islogin">登录</button>
        <br>
        <!-- for循环 -->
        <!-- .toFixed(2)保留两位小数 -->
        <div v-for="i in gongfu">闪电五连鞭-第{{i}}招</div>
        <br>
        <p>猪妲己：</p>
        <div v-for="(b, index) in blue">
            {{index+1}}.
            {{b.name}},
            猪言猪语：{{b.pig}}
        </div>
        <br>
        <h4>v-bind：绑定标签的属性，语法糖形式：</h4>
        <p v-bind:class="wa1">大娃</p>
        <p v-bind:class="wa2">二娃</p>
        <p v-bind:class="wa3">三娃</p>
        <br>
        <h4>v-on：事件监听，语法糖形式@</h4>
        <button v-on:click="say()">点击说话</button>
    </div>

    <script src="vue.js"></script>
    <script>
        //1、实例化（首字母大写-构造函数）
        let vm = new Vue({
            //2、添加选项参数
            //3、作用的元素、范围、区域
            el: '#app',
            //4、数据（对象）的初始化
            data: {
                age: 21,
                name: 'WZ',
                sex: '女',
                Yeswude: true,
                text: 'hello BLUE',
                text2: '<mark>BLUE</mark>',
                //判断是否登录
                islogin: false,
                gongfu: ['壹','贰','叁','肆','伍'],
                blue: 
                [
                    {name: '平a', pig: '法师的至尊平a'},
                    {name: '一技能', pig: '一耳屎'},
                    {name: '二技能', pig: '一个么么哒'},
                    {name: '大招', pig: '拉屎不带纸'}
                ],
                wa1: 'yellow',
                wa2: 'blue',
                wa3: 'pink'
            },
            //方法，函数
            methods: {
                say(){
                    console.log('哥哥，躲雨');
                    console.log('哥哥，我现在不方便开麦，但是我打中单超厉害的！');
                    console.log('哥哥，我知道你其实不是很喜欢我');
                    console.log('哥哥，人家真的是'+this.sex+'孩子啦');
                }
            },
        })
    </script>
</body>
</html>